Skip to main content

Color System

Category Colors​

Education (Emerald)​

Primary: emerald-600, emerald-700
Usage: Education applications, primary CTAs

Accessibility (Purple)​

Primary: purple-600, purple-700
Usage: Accessibility tools and features

Public Services (Orange)​

Primary: orange-600, orange-700
Usage: Public-facing applications

Core Technology Colors​

Each technology has consistent colors across mini preview and full page.

Speech Recognition (Blue)​

Primary: blue-500, blue-600
Gradient: from-blue-50 via-white to-blue-50

Components:
- MiniRecognitionPreview.tsx
- app/recognition/page.tsx

Pattern:

  • Background: bg-gradient-to-br from-white to-blue-50
  • Borders: border-blue-200/50
  • Icons: text-blue-600
  • Buttons: bg-blue-500 hover:bg-blue-600

Text-to-Speech (Green/Emerald)​

Primary: green-500, green-600, primary-600
Gradient: from-primary-50 via-white to-primary-50

Components:
- MiniSynthesisPreview.tsx
- app/synthesis/page.tsx

Pattern:

  • Background: bg-gradient-to-tr to-white from-green-50
  • Borders: border-green-200/50
  • Icons: text-green-600
  • Buttons: bg-green-500 hover:bg-green-600

Note: Uses green in preview, emerald on full page for brand consistency.

Speech-to-Speech (Purple)​

Primary: purple-500, purple-600
Gradient: from-purple-50 via-white to-purple-50

Components:
- MiniSpeechToSpeechPreview.tsx
- app/speech-to-speech/page.tsx

Pattern:

  • Background: bg-gradient-to-br from-white to-purple-50
  • Borders: border-purple-200/50
  • Icons: text-purple-600
  • Buttons: bg-purple-500 hover:bg-purple-600

Custom Colors​

Palatalised (Orange)​

Main: #F47825 (palatalised-500)
Usage: Meall an Óige, phonological emphasis

Velarised (Purple)​

Main: #4133AA (velarised-500)
Usage: Phonological contrast, educational content

Neutral Colors​

  • White - Primary backgrounds
  • Slate (50-900) - Dark sections, text on dark
  • Gray (50-900) - UI elements, text on light

Section Themes​

Light​

bg-white
text-gray-900 (headings)
text-gray-600 (body)
border-gray-100

Dark​

bg-slate-800
text-white (headings)
text-slate-200 (body)
border-gray-700

Alternating Pattern​

Sections alternate light/dark for visual rhythm. Use isDark prop.

Gradients​

Overlays for Images​

/* Dark overlay */
bg-gradient-to-r from-gray-900/80 via-gray-900/40 to-gray-900/20

/* Light overlay */
bg-gradient-to-r from-white via-white/50 to-transparent

/* Category overlays */
bg-gradient-to-br from-emerald-600/80 to-emerald-800/80

Background Gradients​

bg-gradient-to-br from-slate-50 via-white to-palatalised-50
bg-gradient-to-r from-palatalised-700 to-palatalised-500

Accessibility​

  • WCAG AA minimum: 4.5:1 for text, 3:1 for large text
  • Light text on dark: slate-200 or lighter
  • Dark text on light: gray-700 or darker
  • Maintain contrast throughout gradients